<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
    <meta HTTP-EQUIV="Expires" CONTENT="0">
    <link href="../pic/logo.ico" rel="shortcut icon">
    <link rel="stylesheet" href="../lib/element/index.css">
    <link rel="stylesheet" href="../../node_modules/animate.css/animate.min.css">
    <link href="../lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../common/common.css">
    <title>接口分享</title>
</head>
<body>
<div class="container" id="app"  v-cloak>
    <el-row class="row" style="padding: 15px 10px 10px 0;background-color: white;font-size: 20px;font-weight: bold;">
        <el-row class="row" style="height: 50px;border-bottom: 1px gray solid">
            <el-col class="col" :span="4">

            </el-col>
            <el-col class="col" :span="16" style="text-align:center;line-height: 50px;color: #20A0FF;font-size: 30px">
                {{interface.name}}
            </el-col>
            <el-col class="col" :span="4" style="text-align: center;line-height: 50px">

            </el-col>
        </el-row>
        <el-row class="row" style="padding:0 10px;height: 50px;line-height: 50px;color: #50a3ff">
            Method：
        </el-row>
        <el-row class="row" style="padding:0 30px;" :style="{color:methodColor(interface.method)}">
            {{interface.method}}
        </el-row>
        <el-row class="row" style="padding:0 10px;height: 50px;line-height: 50px;color: #50a3ff">
            Path：
        </el-row>
        <el-row class="row" style="padding:0 30px;color: #ff1a27">
            {{interface.url}}
        </el-row>
        <el-row class="row" style="padding:0 10px;height: 50px;line-height: 50px;color: #50a3ff">
            工程：
        </el-row>
        <el-row class="row" style="padding:0 30px;">
            {{interface.project?interface.project.name:""}}
        </el-row>
        <el-row class="row" style="padding:0 10px;height: 50px;line-height: 50px;color: #50a3ff">
            分组：
        </el-row>
        <el-row class="row" style="padding:0 30px;">
            {{interface.group?interface.group.name:""}}
        </el-row>
        <el-row class="row" style="padding:0 10px;height: 50px;line-height: 50px;color: #50a3ff">
            开发状态：
        </el-row>
        <el-row class="row" style="padding:0 30px;">
            {{interface.finish==1?"开发完成":(interface.finish==2?"已废弃":"开发中")}}
        </el-row>
        <el-row class="row" style="padding:0 10px;height: 50px;line-height: 50px;color: #50a3ff">
            描述：
        </el-row>
        <el-row class="row" style="padding:0 30px;">
            {{interface.remark?interface.remark:"无"}}
        </el-row>
        <el-row class="row" style="padding:0 10px;height: 50px;line-height: 50px;color: #50a3ff" v-if="param && param.length>0">
            Restful Param:
        </el-row>
        <el-row class="row" style="padding:0 30px;" v-if="param && param.length>0">
            <table style="width: 100%;font-size: 17px;border-collapse: collapse" border="1" bordercolor="#ddd">
                <thead style="background-color: #50a3ff;color:white;text-align: center;vertical-align: middle">
                <td style="width: 30%">
                    名称
                </td>
                <td style="width: 70%">
                    备注
                </td>
                </thead>
                <tbody>
                <template v-for="item in param">
                    <tr style="text-align: center;vertical-align: middle;height: 40px;word-break: break-all">
                        <td style="width: 30%">
                            {{item.name}}
                        </td>
                        <td style="width: 70%">
                            {{item.remark?item.remark:"无"}}
                        </td>
                    </tr>
                </template>
                </tbody>
            </table>
        </el-row>
        <el-row class="row" style="padding:0 10px;height: 50px;line-height: 50px;color: #50a3ff" v-if="querySave.length>0">
            Query:
        </el-row>
        <el-row class="row" style="padding:0 30px;" v-if="querySave.length>0">
            <table style="width: 100%;font-size: 17px;border-collapse: collapse" border="1" bordercolor="#ddd">
                <thead style="background-color: #50a3ff;color:white;text-align: center;vertical-align: middle">
                <td style="width: 30%">
                    名称
                </td>
                <td style="width: 20%">
                    是否可选
                </td>
                <td style="width: 50%">
                    备注
                </td>
                </thead>
                <tbody>
                <template v-for="item in querySave">
                    <tr style="text-align: center;vertical-align: middle;height: 40px;word-break: break-all">
                        <td style="width: 30%">
                            {{item.name}}
                        </td>
                        <td style="width: 20%">
                            {{item.must?"必选":"可选"}}
                        </td>
                        <td style="width: 50%">
                            {{item.remark?item.remark:"无"}}
                        </td>
                    </tr>
                </template>
                </tbody>
            </table>
        </el-row>
        <el-row class="row" style="padding:0 10px;height: 50px;line-height: 50px;color: #50a3ff" v-if="headerSave.length>0">
            Http Header:
        </el-row>
        <el-row class="row" style="padding:0 30px;" v-if="headerSave.length>0">
            <table style="width: 100%;font-size: 17px;border-collapse: collapse" border="1" bordercolor="#ddd">
                <thead style="background-color: #50a3ff;color:white;text-align: center;vertical-align: middle">
                <td style="width: 30%">
                    Key
                </td>
                <td style="width: 30%">
                    Value
                </td>
                <td style="width: 40%">
                    备注
                </td>
                </thead>
                <tbody>
                <template v-for="item in headerSave">
                    <tr style="text-align: center;vertical-align: middle;height: 40px;word-break: break-all">
                        <td style="width: 30%">
                            {{item.name}}
                        </td>
                        <td style="width: 30%">
                            {{item.value}}
                        </td>
                        <td style="width: 40%">
                            {{item.remark?item.remark:"无"}}
                        </td>
                    </tr>
                </template>
                </tbody>
            </table>
        </el-row>
        <el-row class="row" style="padding:0 10px;height: 50px;line-height: 50px;color: #50a3ff" v-if="(interface.method=='PUT' || interface.method=='POST' || interface.method=='PATCH') && (bodySave.length>0 || bodyInfo.type==1)">
            Body:
        </el-row>
        <el-row class="row" style="padding:0 30px;" v-if="(interface.method=='PUT' || interface.method=='POST' || interface.method=='PATCH') && (bodySave.length>0 || bodyInfo.type==1)">
            <table style="width: 100%;font-size: 17px;border-collapse: collapse" border="1" v-if="bodyInfo.type==0" bordercolor="#ddd">
                <thead style="background-color: #50a3ff;color:white;text-align: center;vertical-align: middle">
                <td style="width: 30%">
                    名称
                </td>
                <td style="width: 20%">
                    类型
                </td>
                <td style="width: 20%">
                    是否可选
                </td>
                <td style="width: 30%">
                    备注
                </td>
                </thead>
                <tbody>
                <template v-for="item in bodySave">
                    <tr style="text-align: center;vertical-align: middle;height: 40px;word-break: break-all">
                        <td style="width: 30%">
                            {{item.name}}
                        </td>
                        <td style="width: 20%">
                            {{item.type==0?"文本":"文件"}}
                        </td>
                        <td style="width: 20%">
                            {{item.must?"必选":"可选"}}
                        </td>
                        <td style="width: 30%">
                            {{item.remark?item.remark:"无"}}
                        </td>
                    </tr>
                </template>
                </tbody>
            </table>
            <el-row v-else-if="bodyInfo.type==1 && bodyInfo.rawType==2">
                <template v-for="item in rawJSON">
                    <div class="row" style="font-size: 18px;min-height: 25px;line-height: 25px;margin: 0;padding: 0;background-color: #fff9e6;word-break: break-all" v-html="item">
                    </div>
                </template>
            </el-row>
            <div class="row" style="margin: 0;padding: 0" v-else>
                <table style="width: 100%;font-size: 17px;border-collapse: collapse" border="1" bordercolor="#ddd">
                    <thead style="background-color: #50a3ff;color:white;text-align: center;vertical-align: middle">
                    <td style="width: 30%">
                        类型
                    </td>
                    <td style="width: 70%">
                        备注
                    </td>
                    </thead>
                    <tbody>
                    <tr style="text-align: center;vertical-align: middle;height: 40px;word-break: break-all">
                        <td style="width: 30%">
                            {{bodyInfo.rawType==0?"文本流":"二进制流"}}
                        </td>
                        <td style="width: 70%">
                            {{bodyInfo.rawType==0?(bodyInfo.rawTextRemark?bodyInfo.rawTextRemark:"无"):(bodyInfo.rawFileRemark?bodyInfo.rawFileRemark:"无")}}
                        </td>
                    </tr>
                    </tbody>
                </table>
                <div class="row" style="margin: 10px 0 0 0;padding: 0" v-if="bodyInfo.rawType==0 && bodyInfo.rawText">
                    <span style="font-size: 15px;">文本示例:</span>
                    <pre>{{bodyInfo.rawText}}</pre>
                </div>
            </div>
        </el-row>
        <el-row class="row" style="padding:0 10px;height: 50px;line-height: 50px;color: #50a3ff" v-if="(outInfo.type==0 && drawMix.length>0) || outInfo.type==1">
            Result:
        </el-row>
        <el-row class="row" style="padding: 0 30px;">
            <el-row class="row" v-if="outInfo.type==0 && drawMix.length>0">
                <template v-for="item in drawMix">
                    <div class="row" style="font-size: 18px;min-height: 25px;line-height: 25px;margin: 0;padding: 0;background-color: #fff9e6;word-break: break-all" v-html="item">
                    </div>
                </template>
            </el-row>
            <table style="width: 100%;font-size: 17px;border-collapse: collapse" border="1" v-if="outInfo.type==1" bordercolor="#ddd">
                <thead style="background-color: #50a3ff;color:white;text-align: center;vertical-align: middle">
                <td style="width: 20%">
                    类型
                </td>
                <td style="width: 50%">
                    备注
                </td>
                <td style="width: 30%">
                    Mock
                </td>
                </thead>
                <tbody>
                <tr style="text-align: center;vertical-align: middle;height: 40px;word-break: break-all">
                    <td style="width: 20%">
                        RAW
                    </td>
                    <td style="width: 50%">
                        {{outInfo.rawRemark?outInfo.rawRemark:"无"}}
                    </td>
                    <td style="width: 30%">
                        {{rawMock}}
                    </td>
                </tr>
                </tbody>
            </table>
        </el-row>
        <el-row class="row" style="height: 100px"></el-row>
    </el-row>
</div>
<script src="../../dist/vendor.bundle.js"></script>
<script src="../lib/element/index.js"></script>
<script src="../../dist/share.js"></script>
</body>
</html>